<template>
  <div class="home">
  <Header title="加班/休假"></Header>
   
   <!-- 控制状态切换(状态过滤) -->
   <div class="status-box">
     <div :class="{status:true,active: currentStatus===index }" v-for="(item,index) in statusList" :key="item.text" @click="currentStatus = index">
       <span :class="item.class"></span>
       <span>{{item.text}}</span>
     </div>
   </div>

   <!-- 控制类型切换(类型过滤) -->
   <div class="type-box">
     <div :class="{type:true,active: currentType === index}" v-for="(item,index) in typeList" :key="index" @click="currentType = index">
       {{item}}
     </div>
   </div>
   

   <!-- 任务列表 -->
   <div class="list" v-if="list.length > 0">
     <router-link class="task" v-for="task in list" :key="task.id" :to="{name:'detail',params: {id:task.id} }">
     <div class="title">
       <span>{{'sdfsdfsd'}}</span>
       <span>待审批</span>
     </div>

     <div class="content">
       <div class="block"> 
         <div class="line"><span>申请人</span> <span>{{task.user.name}}</span></div>
         <div class="line"><span>{{task.type === 0?'加班日期':'休假日期'}}</span> <span>{{new Date(task.date).toLocaleDateString()}}</span></div>
       </div>
       <div class="block"> 
         <div class="line"><span>{{task.type === 0?'加班类型':'休假类型'}}</span> <span>{{task.type === 0?'工作日加班':'产假'}}</span></div>
         <div class="line"><span>{{task.type === 0?'加班时数':'休假时数'}}</span> <span>{{ Math.floor( (new Date(task.endtime)-new Date(task.starttime))/(60*60*1000) ) }}</span></div>
       </div>
       
     </div>
   </router-link>
   </div>
   <div class="empty" v-else>还没有任何任务!</div>
   

   <div class="add" @click="showMask = true">
     + 发起任务
   </div>


    <My-Mask v-show="showMask" @hideMask="showMask=false"></My-Mask>

  </div>
</template>

<script>
import Mask from '../../components/Mask'
import {mapState} from 'vuex'

export default {
  data:function(){
    return {
      currentType:0,//保存 当前点击的类型
      currentStatus:0,//保存 当前点击的状态
      statusList:[
        {
          text:'待处理',
          class: 'iconfont icon-daichuli'
        },
        {
          text:'已发起',
          class: 'iconfont icon-daichuli'
        },
        {
          text:'已处理',
          class: 'iconfont icon-daichuli'
        }
      ],
      typeList:[
        '加班','休假'
      ],
      showMask:false
    }
  },
  computed:{
    ...mapState(['taskList']),
    list:function(){
      return this.taskList.filter((item)=>{ return this.currentStatus === item.status && this.currentType === item.type })
    }
  },
  name: 'home',
  components: {
   'My-Mask':Mask
  }
}
</script>


<style >
/* 类型 */
.type-box{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px ;
}
.type-box .type{
  color: green;
  width: 80px;
  text-align: center;
  line-height: 30px;
  border-radius: 15px 0 0 15px; 
  border: 1px solid green;
}
.type-box .type.active{
  background-color: green;
  color: white;
}
.type-box .type:last-child{
  border-radius:  0 15px 15px 0; 
}

/* 状态 */
.status-box{
  padding: 30px 0;
  background-color: white;
  display: flex;
  justify-content: space-around;
}
.status-box .status{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.status-box .status.active{
  color: green;
}
.status-box .status .iconfont{
  font-size: 20px;
  margin-bottom: 10px;
}
.task{
  display: block;
  text-decoration: none;
  color: #333333;
  font-size: 14px;
  margin-bottom: 20px;
  padding: 0 20px;
  background-color: white;
}

.task .title{
  display: flex;
  justify-content: space-between;
  line-height: 50px;
}
.task .content{
  line-height: 50px;
  display: flex;
}
.task .content .block{
  flex: 1;
}
.task .content .block .line span:first-child{
  width: 70px;
  display: inline-block;
}
  .add{
    position: fixed;
    right: 20px;
    bottom: 30px;
    background-color: green;
    color: white;
    line-height: 50px;
    padding: 0 30px;
    border-radius: 25px;
  }

  .empty{
    padding: 50px 0;
    text-align: center;
  }
</style>